<template>
  <div class="h-footer h-44px bg-blue-gray-500">
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">搜索</van-tabbar-item>
      <van-tabbar-item icon="friends-o">个人</van-tabbar-item>
      <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Toast } from 'vant'
const active = ref(0)
const onChange = (index: string) => Toast(`标签 ${index}`)
</script>

<style lang="less" scoped></style>
